<template>
	<view class="page share-page">
		<image src="../../../static/images/ui_yaoqing_bg.png" mode="widthFix" class="pct100"></image>
		<form report-submit="true" @submit="setFormId" class="padding-left50 padding-right50 padding-bottom50" style="margin-top: -120rpx;">
			<button form-type="submit" type="primary" style="background-color: #a188c7;color: #FFFFFF;width: 580rpx;height: 94rpx;line-height: 94rpx;" disabled v-if="isOpenShare==2" >领取成功</button>
			<button form-type="submit" @tap="receiveExchangeCoupon" type="primary" style="background-color: #faed15;color: #b32828;width: 580rpx;height: 94rpx;line-height: 94rpx;" v-else-if="shareTotal<=list.length && isOpenShare==1" >点击领取</button>
			<button form-type="submit" type="primary" open-type="share" style="background-color: #faed15;color: #b32828;width: 580rpx;height: 94rpx;line-height: 94rpx;" v-else >去邀请</button>
			<view class="padding40 margin-top40 border-radius20" style="background-color: #674eeb;">
				<view class="font-size28 text-center mc-flex-vcenter mc-flex-center">累计邀请 <text class="mc-yellow font-size36 margin-left10 margin-right10">{{list.length}}</text> 人，还剩 <text class="mc-yellow font-size36 margin-left10 margin-right10">{{needTotal}}</text> 人 </view>
				<view class="margin-top36">
					<block  v-for="(item,index) in shareTotal" :key="index">
						<image :src="list[index].photo" mode="aspectFill" class="avatar" :class="{'margin-left18':(index%5!=0)}" ></image>
					</block>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex';
	let _self;
	export default {
		components: {},
		data() {
			return {
				list: [],
				shareTotal: 20,
				isOpenShare: 0,
			}
		},
		computed:{
			...mapGetters('user', ['_gameInfo']),
			needTotal:function(){
				return parseInt(this.shareTotal) - this.list.length
			}
		},
		onLoad(options) {
			_self = this;
			this.loadList()
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadList();
		},
		methods: {
			...mapActions('user', ['gameInfoUp']),
			// 加载列表
			async loadList() {
					try {
						let data = await this.$api.home.recordList();
						console.log(data)
						
						this.list = data.list || []
						this.shareTotal = data.shareTotal || 20;
						this.isOpenShare = data.isOpenShare || 0;
						this.updateOpenShare()
					} catch (e) {
						console.log('request fail', e);
					}
			},
			// 开启分享
			async updateOpenShare() {
				if(this.isOpenShare!=0) return
				try {
					let data = await this.$api.home.updateOpenShare();
					console.log(data)
					this.loadList()
					this.gameInfoUp()
				} catch (e) {
					console.log('request fail', e);
				}
			},
			// 领取兑换券
			async receiveExchangeCoupon() {
				try {
					let data = await this.$api.home.receiveExchangeCoupon();
					console.log(data)
					this.loadList()
					this.gameInfoUp()
				} catch (e) {
					console.log('request fail', e);
				}
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e){
				this.$store.dispatch('common/formIdListUp', { e:e, isSave:true })
			}
		},
		onShareAppMessage(res) {
			const num = Math.floor(Math.random() * 6 + 1);
			console.log(num);
			if (res.from === 'button') {
			  // 来自页面内分享按钮
			  console.log(res.target);
			}
			return {
			  title: '答题赢Q币和荣耀皮肤，几率极高，快来试试',
			  path: '/pages/tabBar/home/index?shareUserId=' + this._gameInfo.userId,
			  imageUrl: 'https://miaozhua-test.oss-cn-hangzhou.aliyuncs.com/luckKing/icon/share' + num + '.jpg'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.share-page {
		background-color: #5d0ccb; 
		color: #FFFFFF;
		font-size: 32rpx;
		
		.avatar{
			width: 98rpx;
			height: 98rpx;
			border-radius: 98rpx;
			background-color: #695cf4;
			margin-top: 6rpx;
		}
	}
</style>
